<template>
	<view class="address-list">
		<!-- 地址列表 -->
		<scroll-view scroll-y class="list-scroll" v-if="addressList.length">
			<view class="address-item" v-for="(item, index) in addressList" :key="index" @tap="handleItemClick(item)">
				<view class="info">
					<view class="user">
						<text class="name">{{item.name}}</text>
						<text class="mobile">{{item.mobile}}</text>
						<text class="tag" v-if="item.is_default">默认</text>
					</view>
					<view class="address text-ellipsis">{{item.location}}</view>
					<view class="address text-ellipsis">{{item.house_number}}</view>
				</view>
				<view class="action">
					<!-- <view class="edit" @tap.stop="editAddress(item)">
						<u-icon name="edit" color="#666" size="40"></u-icon>
					</view> -->
					<view class="delete" @tap.stop="deleteAddress(item)">
						<u-icon name="trash" color="#666" size="40"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 空状态 -->
		<view class="empty" v-else>
			<view class="empty-icon">
				<u-icon name="map" size="60" color="#999"></u-icon>
			</view>
			<view class="empty-text">
				<view class="title">暂无收货地址</view>
				<view class="desc">添加地址更方便下单哦</view>
			</view>
			<view class="empty-btn" @tap="navTo('/pages/address/edit')">
				<u-icon name="plus" color="#018d71" size="24"></u-icon>
				<text>新增地址</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer" v-if="addressList.length">
			<view class="add-btn" @tap="navTo('/pages/address/edit')">
				<u-icon name="plus" color="#fff" size="32"></u-icon>
				<text>新增收货地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [],
				selectMode: false // 是否为选择地址模式
			}
		},
		onLoad(e) {
			if(e.select) {
				this.selectMode = true
			}
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			// 获取地址列表
			getAddressList() {
				vk.callFunction({
					url: 'client/address/kh/getList',
					data: {
						uid: vk.getVuex('$user.userInfo._id')
					},
					success: (data) => {
						if(data.rows) {
							this.addressList = data.rows
						}
					}
				})
			},
			// 处理地址项点击
			handleItemClick(address) {
				if(this.selectMode) {
					this.selectAddress(address)
				} else {
					this.editAddress(address)
				}
			},
			// 选择地址
			selectAddress(address) {
				if(!this.selectMode) return
				// 选择地址并返回
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.selectAddress(address)
				uni.navigateBack()
			},
			// 编辑地址
			editAddress(address) {
				uni.navigateTo({
					url: `/pages/address/edit?id=${address._id}`
				})
			},
			// 删除地址
			deleteAddress(address) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该地址吗？',
					success: (res) => {
						if(res.confirm) {
							vk.callFunction({
								url: 'client/address/kh/remove',
								data: {
									id: address._id
								},
								success: () => {
									uni.showToast({
										title: '删除成功'
									})
									this.getAddressList()
								}
							})
						}
					}
				})
			},
			// 页面跳转
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-list {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 180rpx;

		.list-scroll {
			padding: 20rpx;
			
			.address-item {
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.03);
				
				.info {
					flex: 1;
					margin-right: 30rpx;
					
					.user {
						margin-bottom: 16rpx;
						
						.name {
							font-size: 32rpx;
							color: #333;
							font-weight: 500;
							margin-right: 20rpx;
						}
						
						.mobile {
							font-size: 28rpx;
							color: #666;
							margin-right: 20rpx;
						}
						
						.tag {
							font-size: 22rpx;
							color: #018d71;
							background-color: rgba(1,141,113,0.1);
							padding: 4rpx 12rpx;
							border-radius: 6rpx;
						}
					}
					
					.address {
						font-size: 28rpx;
						color: #666;
						line-height: 1.4;
						width: 300px
					}
				}
				
				.action {
					display: flex;
					align-items: center;
					
					.edit, .delete {
						width: 80rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						
						&::after {
							content: '';
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							background-color: rgba(0,0,0,0.05);
							opacity: 0;
							transition: opacity 0.2s;
						}
						
						&:active::after {
							opacity: 1;
						}
					}
				}
			}
		}
		
		.empty {
			padding-top: 300rpx;
			text-align: center;
			
			.empty-icon {
				margin-bottom: 40rpx;
				
				/* 添加图标动画效果 */
				animation: float 3s ease-in-out infinite;
			}
			
			.empty-text {
				.title {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 16rpx;
				}
				
				.desc {
					font-size: 26rpx;
					color: #999;
				}
			}
			
			.empty-btn {
				margin-top: 60rpx;
				display: inline-flex;
				align-items: center;
				padding: 20rpx 40rpx;
				background-color: rgba(1,141,113,0.1);
				border-radius: 40rpx;
				
				text {
					font-size: 28rpx;
					color: #018d71;
					margin-left: 8rpx;
				}
				
				&:active {
					transform: scale(0.98);
				}
			}
		}
		
		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 20rpx rgba(0,0,0,0.08);
			
			.add-btn {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(135deg, #02a584 0%, #018d71 100%);
				color: #fff;
				border-radius: 44rpx;
				font-size: 30rpx;
				box-shadow: 0 8rpx 16rpx rgba(1,141,113,0.2);
				transition: transform 0.2s;
				
				text {
					margin-left: 12rpx;
				}
				
				&:active {
					transform: translateY(2rpx);
				}
			}
		}
	}
	
	.text-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/* 图标浮动动画 */
	@keyframes float {
		0% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-20rpx);
		}
		100% {
			transform: translateY(0);
		}
	}
</style>
